<template>
	<view style="height: 100vh;" :style="{'fontFamily':themeColor.typeface,'color':themeColor.main_font_color}">
		 
		<view class="fenggeStyle">
			<view style="font-weight: 700;">风格选择</view>
		
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
				<view @click="selectType(item,index)"  class="scroll-item" v-for="(item,index) in fenggeList">
					<view class="label">
						<image :style="fenggeIndex == index?'box-shadow: 1px 1px 4px 1px rgba(166, 166, 166, 0.4);background-color:rgba(176, 32, 29, 0.1);border:1px solid #f3f3f3':''" style="height: 108rpx;width: 108rpx;border-radius: 12rpx;" :src="item.image" mode="aspectFill"></image>
						<view :style="fenggeIndex == index?'color:'+themeColor.main_color+';font-weight:700':'color:#474747'">{{item.title}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		 
		
		<view class="nuoyu-index" v-if="list.length > 0">
			<view style="padding: 20rpx;" class="nuoyu-index-header" v-for="(item,index) in list">
				<view style="position: relative;">
					<view style="display: flex;gap: 12rpx;">
						<image style="width: 88rpx;height: 88rpx;border-radius: 16rpx;" :src="item.head_img" ></image>
						<view style="display: flex;flex-direction: column;gap: 12rpx;">
							<view style="font-size: 30rpx;font-weight: 700;color: #212121;">用户:{{item.nickName}}</view>
							<view style="font-size: 24rpx;color: #8a8a8a;">
								{{item.ctime}}
							</view>
						</view>	
					</view>
					<view style="position: relative;">
						<view v-if="index == activeIndex" :class="active_Y" style="position: absolute;top:30%" :style="{'color':themeColor.main_color}">
							+1
						</view>
						<image @click="PreviewImage(wechatConfig.tencent‌Domain + item.url)" style="width: 100%;border-radius: 8rpx;margin-top: 16rpx;" :src="wechatConfig.tencent‌Domain + item.url" mode="widthFix"></image>
						<view :style="{'color':themeColor.main_color}" style="display: flex;justify-content: center;position: absolute;bottom: 12px;left: 12rpx;display: flex;gap: 16rpx;font-weight: 							700;box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
							background-color:rgba(255,255,255,0.1);padding: 6rpx 16rpx;border-radius: 8rpx;">
							<view>预览人数:{{item.preview}}</view>
							<view>点赞人数:{{item.likes}}</view>
						</view>
						<view @click="dianzan(item,index)" style="display: flex;justify-content: center;position: absolute;width: 180rpx;bottom: 12px;right: 140rpx;z-index: 99;">
							<svg t="1742371942628" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27435" width="32" height="32"><path d="M691.2 870.4H422.912c-10.24 0-17.408-8.192-17.408-17.408 0-10.24 8.192-17.408 17.408-17.408h268.288c19.456 0 35.84-9.216 46.08-25.6 7.168-17.408 79.872-201.728 94.208-256 12.288-48.128-15.36-97.28-63.488-109.568-7.168-2.048-14.336-3.072-23.552-3.072H636.928c-6.144 0-11.264-3.072-14.336-8.192-3.072-5.12-4.096-11.264-2.048-16.384 10.24-27.648 16.384-92.16 16.384-173.056 0-29.696-24.576-53.248-53.248-53.248-29.696 0-53.248 24.576-53.248 53.248v17.408c0 118.784-96.256 215.04-215.04 215.04-10.24 0-17.408-8.192-17.408-17.408 0-10.24 8.192-17.408 17.408-17.408 98.304 0 179.2-79.872 179.2-179.2v-17.408c0-49.152 39.936-89.088 89.088-89.088 49.152 0 89.088 39.936 89.088 89.088 0 43.008-2.048 113.664-12.288 161.792h83.968c12.288 0 22.528 1.024 32.768 4.096 66.56 17.408 106.496 87.04 89.088 153.6-15.36 57.344-93.184 252.928-96.256 261.12 0 1.024-1.024 2.048-1.024 2.048-15.36 26.624-43.008 43.008-73.728 44.032-2.048-1.024-3.072-1.024-4.096-1.024z" fill="#f16c64" p-id="27436"></path><path d="M315.392 870.4H225.28c-39.936 0-71.68-31.744-71.68-71.68V512c0-39.936 31.744-71.68 71.68-71.68h89.088c10.24 0 17.408 8.192 17.408 17.408v394.24c1.024 10.24-7.168 18.432-16.384 18.432zM225.28 476.16c-19.456 0-35.84 16.384-35.84 35.84v286.72c0 19.456 16.384 35.84 35.84 35.84h71.68v-358.4h-71.68z" fill="#f16c64" p-id="27437"></path></svg>
						</view>
						<view style="display: flex;justify-content: center;position: absolute;bottom: 12px;right: 12rpx;">
							<view :style="buttonStyle">
								制作相似
							</view>
						</view>
					</view>
					
					<view>
						 <u-collapse
						    
						  >
						    <u-collapse-item
						      title="创意分享(点击复制)"
						      name="Docs guide"
						    >
						      <text class="u-collapse-content" @click="fuzhi(item.search_content)">{{item.search_content}}</text>
						    </u-collapse-item>
						   
						  </u-collapse>
					</view>
				</view>
			</view>
		</view>
		<!-- :src="wechatConfig.tencent‌Domain + item.url" -->
		<view v-else style="position: relative;top: 35%;">
			<u-empty
			        mode="message"
			        icon="https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/test/1738749101_空数据.png"
			>
			</u-empty>
		</view>
		
	</view>
</template>

<script>

	export default{
		computed:{
			 
			buttonStyle(){
				const data = {}
				data['width']='103px'
				data['height']='50rpx'
				data.background=this.themeColor.main_color
				data.color = 'white'
				data.fontSize = '24rpx'
				data.display = 'flex'
				data.justifyContent = 'center'
				data.textAlign = 'center'
				data.alignItems = 'center'
				data.borderRadius = '24rpx'
				return data
			} 
		},
		data(){
			return{
				fenggeIndex:0,
				fenggeList:[
					{
						title:'热门推荐',
						image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png',
					},
					{
						title:'最新图片',
						image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png',
						 
					},{
						title:'点赞最多',
						image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png',
						 
					},{
						title:'我的图片',
						image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png',
						 
					},
				],
				active_Y:'',
				activeIndex:'',
				themeColor:"",
				screenWidth:0,
				screenHeight:0,
				id:'',
				list:[],
				wechatConfig:'',
				param:{
					pageSize:10,
					pageNum:1,
					keywrod:'',
					types:0
				}
			}
		},
		
		onLoad(options) {
			const info = uni.getSystemInfoSync();
			
			this.themeColor = this.$store.state.themeConfig || uni.getStorageSync('themeConfig')
			this.wechatConfig = this.$store.state.wechatConfig ||  uni.getStorageSync('wechatConfig')
			this.screenHeight = info.screenHeight;
			this.screenWidth = info.screenWidth
			this.DataItem();
		},
		onReachBottom() { // 当页面触底时触发的方法
			this.param.pageSize += 10;
		    this.DataItem(); // 调用加载更多数据的函数
		},
		filters:{
			//点击商品
			clickItem(e) {
				console.log('所点击商品信息:', e)
			},
			// 1微信支付、2支付宝支付、3余额支付、4月卡支付，5.微信,余额,支付宝，6.全部
			getPaypalType(value){
				if(value == 1){
					return '商品'
				}
				if(value == 2){
					return '商品'
				}
				if(value == 3){
					return '余额'
				}
				if(value == 4){
					return '月卡'
				}
				if(value == 5){
					return '活动'
				}
				if(value == 6){
					return '活动'
				}
			}
		},
		methods:{
			selectType(item,index){
				this.fenggeIndex = index
				if(index == 0){
					this.param.types = '热门推荐'
					this.DataItem();
				}
				if(index == 1){
					this.param.types = '最新图片'
					this.DataItem();
				}
				if(index == 2){
					this.param.types = '点赞最多'
					this.DataItem();
				}
				if(index == 3){
					this.param.types = '我的图片'
					this.DataItem();
				}
			},
			PreviewImage(image){
				uni.previewImage({
				    current: 0, // 当前显示图片的http链接
				    urls: [image] // 需要预览的图片http链接列表
				});
			},
			dianzan(item,index){
				if(this.activeIndex != ''){
					return
				}
				this.activeIndex = index
				this.active_Y = 'dianzan'
				
				
				setTimeout(()=>{
					this.activeIndex = ''
					this.active_Y = ''
					this.dianzanAdd(item);
				},3000)
				
			},
			fuzhi(e){
				uni.setClipboardData({
					data: e, // e是你要保存的内容
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				})
			},
			DataItem(){
				this.tui.request("/basic-capi/getAIPictureList/list", "get",
				this.param
				 ).then(res=>{
					if(res.code == 200){
						this.list = res.data.list
						// this.goodsList.forEach((item)=>{
						// 	item.previewUrl = this.wechatConfig.tencent‌Domain + item.previewUrl
						// })
					} 
				})
			},
		 
			dianzanAdd(item){
				item.likes += 1
				this.tui.request("/basic-capi/dianzan/add", "post",
				item
				 ).then(res=>{
					if(res.code == 200){
						// this.DataItem();
						 
					} 
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	 
	 // .nuoyu-index{
	 // 	column-count: 3;  /* 列数 */
	 // 	  column-gap: 1em;  /* 列间距 */
	 // }
	 .nuoyu-index-header{
	 	break-inside: avoid; /* 防止元素跨列断裂 */
	 	  margin-bottom: 1em;  /* 元素间距 */
		  color: #CCC;
	 }
	
	 .dianzan{
		font-size: 60px;
		position: absolute;
		z-index: 99;
		left: 40%;
		top: 30%;
		animation:fadenum 3s 1;
	 }
	 @keyframes fadenum{
		0%{
			font-size: 0px;
			left: 40%;
		}
		50%{
			font-size: 60px;
			left: 40%;
		}
		55%{
			font-size: 60px;
			left: 40%;
			transform: translatey(0px) scale(1);
		}
		75% {
			font-size: 60px;
			transform: translatey(-27px) scale(1.43);
			left: 40%;
		}
		100%{
			font-size: 60px;
			transform: translatey(0px) scale(1);
			 
		}
	 }
	 .fenggeStyle{
	 	padding: 20rpx;
	 	display: flex;
	 	flex-direction: column;
	 	gap: 12rpx;
	 	.label{
	 		display: flex;
	 		flex-direction: column;
	 		justify-content: center;
	 		gap: 6rpx;
	 		text-align: center;
	 	}
	 	 
	  }
	  .scroll-view_H {
	 	white-space: nowrap;
	 	display: flex;
	 	width: 100%;
	 	.scroll-item{
	 		display: inline-block;
	 		padding: 0rpx 26rpx 16rpx 0rpx;
	 		border-radius: 8rpx;
	 	}
	 }
</style>